<template>
	<flow-design :code="state.code" @onSave="onSave"></flow-design>
</template>

<script setup lang="ts">
import FlowDesign from '@/components/flow/design/index.vue';
import { getChain } from '@/api/rule/rulechain';
import { ref, onMounted, reactive } from 'vue';
import { useRoute } from 'vue-router';

const Route = useRoute(); //获取到值

const state = reactive({
	code: '{}',
});
/*const code = `{
    "lfData": [
        {
            "name": "首屏",
            "dataCode": {
              "nodes": [
                {
                  "id": "5bb80084-dda3-4693-9f5d-140b9461240a",
                  "type": "button",
                  "x": 302,
                  "y": 273,
                  "properties": {
                    "icon": "icon_module/svg/button.svg",
                    "name": "按钮",
                    "mainColor": "#3A75FF",
                    "fuColor": "#3A75FF",
                    "opacity": 1,
                    "textColor": "#59a5a5",
                    "textAlign": "center",
                    "textSize": 12,
                    "textWeight": "normal",
                    "dataInterval": 0
                  },
                  "zIndex": 1
                }
              ],
              "edges": []
            },
            "model": "topology",
            "openRule": false,
            "setting": {
                "width": 1264,
                "height": 774,
                "describe": "",
                "grid": {
                    "size": 20,
                    "open": false,
                    "type": "mesh"
                },
                "backgroundType": "adaption"
            }
        },
        {
            "name": "aa",
            "dataCode": {
                "nodes": [
                    {
                        "id": "a9f1339d-e2d1-4b4d-a0b0-619bde43e539",
                        "type": "rect",
                        "x": 380,
                        "y": 200,
                        "properties": {
                            "icon": "icon_module/svg/rec.svg",
                            "name": "矩形",
                            "radius": 1,
                            "borderStyle": "solid",
                            "borderWidth": 1,
                            "textColor": "#59a5a5",
                            "textAlign": "center",
                            "textSize": 12,
                            "textWeight": "normal",
                            "dataInterval": 0
                        },
                        "zIndex": 1
                    },
                    {
                        "id": "a9f248a6-b2ae-45d5-841d-4dd7384dd350",
                        "type": "diamond",
                        "x": 571,
                        "y": 419,
                        "properties": {
                            "icon": "icon_module/svg/rhombus.svg",
                            "name": "菱形",
                            "borderStyle": "solid",
                            "borderWidth": 1,
                            "textColor": "#59a5a5",
                            "textAlign": "center",
                            "textSize": 12,
                            "textWeight": "normal"
                        },
                        "zIndex": 1
                    }
                ],
                "edges": [
                    {
                        "id": "025f884b-0b83-4490-9211-4f9a65d06056",
                        "type": "bezier-link",
                        "sourceNodeId": "a9f1339d-e2d1-4b4d-a0b0-619bde43e539",
                        "targetNodeId": "a9f248a6-b2ae-45d5-841d-4dd7384dd350",
                        "startPoint": {
                            "x": 430,
                            "y": 200
                        },
                        "endPoint": {
                            "x": 536,
                            "y": 419
                        },
                        "properties": {
                            "icon": "line",
                            "name": "边",
                            "animationOpen": false,
                            "borderColor": "#999",
                            "borderWidth": 2,
                            "animationSpeed": 10,
                            "animationStroke": "rgb(130, 179, 102)",
                            "arrowStartType": "default",
                            "arrowEndType": "default",
                            "animationsType": "Electricity",
                            "animationReverse": false
                        },
                        "zIndex": 1,
                        "pointsList": [
                            {
                                "x": 430,
                                "y": 200
                            },
                            {
                                "x": 530,
                                "y": 200
                            },
                            {
                                "x": 436,
                                "y": 419
                            },
                            {
                                "x": 536,
                                "y": 419
                            }
                        ]
                    }
                ]
            },
            "model": "topology",
            "openRule": false,
            "setting": {
                "width": 961,
                "height": 774,
                "describe": "",
                "grid": {
                    "size": 20,
                    "open": true,
                    "type": "mesh"
                },
                "backgroundType": "adaption"
            }
        }
    ],
    "twin": {
        "deviceModel": [],
        "protocol": {}
    }
}`*/

const onSave = (newCode: any) => {
	console.log(newCode);
};

onMounted(() => {
	const id = Route.query.id;
	getChain(id).then((res) => {
		console.log('kkkkkk', res);
		state.code = JSON.parse(res.data.ruleDataJson ? res.data.ruleDataJson : JSON.stringify({}));
	});
});
</script>

<style scoped></style>
